<template>
	<view class="qilin-cityContent">
		<view class="cityContent-header">
			<text class="iconfont icon-31dingwei"></text>
			<text class="cityContent-header-location">自动定位:{{currentCity}}</text>
			<text class="cityContent-header-operate" @click="switchChangeCity">切换 ></text>
		</view>
		<view class="cityContent-content">
			<view class="cityContent-content-item" v-for="item in 6" :key="item">
				<view class="item-video">
					<video src="http://localhost:9999/videos/douyin2.mp4" :controls="false" objectFit="cover"></video>
				</view>
				<image src="@/static/imgs/avator.jpg"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				currentCity:"南京"
			}
		},
		methods:{
			//点击切换图标选择城市
			switchChangeCity(){
				uni.navigateTo({
					url:"/pages/changeCity/changeCity"
				});
			}
		},
		mounted(){
			uni.getStorage({
				key:"currentCity",
				success:(res)=>{
					this.currentCity=res.data;
				}
			});
		}
	}
</script>

<style>
	.qilin-cityContent{
		color:#fff;
		padding-top:140rpx;
	}
	.cityContent-header{
		color:#ccc;
		font-size:20rpx;
		height:40rpx;
		line-height:40rpx;
		padding:0 40rpx;
		display:flex;
		justify-content:space-around;
		align-items:center;
	}
	.cityContent-header-location{
		margin:0 10rpx;
		flex:1;
	}
	.cityContent-content{
		width:100%;
		overflow-y:auto;
		/* background-color:#000; */
		padding-bottom:100rpx;
	}
	.cityContent-content-item{
		width:50%;
		position:relative;
		float:left;
		padding:20rpx;
		box-sizing:border-box;
	}
	.cityContent-content-item>image{
		width:50rpx;
		height:50rpx;
		border-radius:50%;
		position:absolute;
		right:20rpx;
		bottom:20rpx;
	}
	.item-video{
		width:100%;
		height:500rpx;
	}
	.item-video>video{
		width:100%;
	}
</style>
